<template>
	<view>
		<view class="bg-white padding">
			<view class="rowsb ">
				<!-- subjects4 -->
				<view v-for="(item,index) in title" @click="titleMen(index,item.id)">
					<view :class="{titleText:index == titleNums}">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="align-center rowsa" style="margin-top: 30rpx;">
				<view class="" @click="wrong">
					<view class="rowsc">
						<image src="/static/icon/icon_wodecuoti.png" mode="" style="height: 100rpx;width: 100rpx;">
						</image>
					</view>
					<view class="margin-top-sm text-sm">
						我的错题
					</view>
				</view>
				<view @click="simulation"
					style="background: #0054A7;height: 180rpx;width: 180rpx;border: 20rpx solid #CAE6FF;"
					class="text-white align-center rowsc round">
					<view>
						模拟考试
					</view>
				</view>
				<view class="text-sm  text-center " @click="achievement">
					<view class="rowsc">
						<image src="/static/icon/icon_wodechengji.png" mode="" style="height: 100rpx;width: 100rpx;">
						</image>
					</view>
					<view class="margin-top-sm">
						我的成绩
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm padding">
			<view class="" style="font-weight: 400;">
				必看难点归纳
			</view>
			<view class="flex rowsb text-center text-sm margin-top">
				<view v-for="(item,index) in titledataList" @click="examinationMen2(item.id)" v-if="titleid==1">
					<view class="rowsc">
						<image :src="item.icon" mode="" class=" round " style="width: 102rpx;height: 102rpx;"
						:class="{'bg0054A7':index ==1}"
						></image>
					</view>
					<view class="margin-top-sm text-center">
						{{item.name}}
					</view>
				</view>
				<view v-for="(item,index) in titledataList2" @click="examinationMen2(item.id)" v-if="titleid==4">
					<view class="rowsc">
						<image
							:src="item.icon"
							mode="" class=" round" style="width: 100rpx;height: 100rpx;"></image>
					</view>
					<view class="margin-top-sm text-center">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="bg-white margin-top-sm padding">
			<view style="font-weight: 400;">
				考试锦囊
			</view>
			<view class="rowsb margin-top" v-if="titleid==1">
				<view style="background: #00C27C;border-radius: 15rpx;" class="padding-xl " @click="examinationMen2(6)">
					<text class="text-white">科目一考试内容介绍</text>
				</view>
				<view style="background: #3A98FD;border-radius: 15rpx;" class="padding-xl " @click="examinationMen2(7)">
					<text class="text-white">学习与记忆技巧</text>
				</view>
			</view>
			<view class="rowsb margin-top" v-if="titleid==4">
				<view style="background: #00C27C;border-radius: 15rpx;" class="padding-xl " @click="examinationMen2(12)">
					<text class="text-white">科目四考试内容介绍</text>
				</view>
				<view style="background: #3A98FD;border-radius: 15rpx;" class="padding-xl " @click="examinationMen2(13)">
					<text class="text-white">学习与记忆技巧</text>
				</view>
			</view>
		</view>
	<view class=" bg-white ">
		<view class="flex ">
			<view class=" padding-sm text-lg margin-left" style="color: #0054A7;border-bottom: 4rpx solid #0054A7;">
				推荐报名
			</view>
		</view>
	</view>
	<view>
		<view class=" bg-white flex rowsb padding-lr flex-wrap" style="padding-bottom: 100rpx;">
			<view style="width: 47%;" class="bg-white radius margin-top" v-for="(item,index) in signUpData" @click="commodityDetail(item.id)">
				<view>
					<image :src="image+item.img" mode="aspectFill" style="height: 312rpx;width: 100%;" class="bg-gray radius"></image>
				</view>
				<view class=" padding-bottom">
					<view>
						<view class="text-lg">{{item.title}}</view>
						<view class="text-gray" style="text-decoration:line-through">￥{{item.old_price}}</view>
					</view>
					<view class="rowsb align-center">
						<view class="text-red ">￥{{item.price}}</view>
						<view class="text-sm">{{item.sale_num}}人付款</view>
					</view>
				</view>
			</view>
		</view>
		 
	</view>
		 
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		signUpList
	} from '../../../common/path.js'
	export default {
		data() {
			return {
				titleNums: 0,
				titleid: 1,
				title: [{
						name: '科目1',
						id: 1
					},
					{
						name: '科目4',
						id: 4
					}
				],
				titledataList: [{
						name: '时间与日期',
						icon: '/static/icon/icon_shijian.png',
						id: 1
					},
					{
						name: '距离',
						icon: '/static/icon/icon_juli.png',
						id: 2
					},
					{
						name: '车速',
						icon: '/static/icon/icon_chesu.png',
						id: 3
					},
					{
						name: '交通标志',
						id: 4,
						icon: '/static/icon/icon_jiaotongbiaozhu.png',
					},
					{
						name: '交警手势',
						id: 5,
						icon: '/static/icon/icon_jiaojingshoushi.png',
					}
				],
				titledataList2: [{
						name: '安全驾驶',
						id: 8,
						icon:'/static/jiashi.png'
					},
					{
						name: '文明礼让',
						id: 9,
						icon:'/static/wenminglirang.png'
					},
					{
						name: '回应避险',
						id: 10,
						icon:'/static/fengxx.png'
					},
					{
						name: '事故案例分析',
						id: 11,
						icon:'/static/shigu.png'
					},
				],
				signUpData: [], //推荐报名
				image: ''
			}
		},
		onShow() {
			this.signListMen()
			this.image = app.image
		},
		methods: {

			//详情
			commodityDetail(id) {
				console.log()
				uni.navigateTo({
					url: '../commodityDetail/commodityDetail?id=' + id,
				})
			},
			//选择科目几
			titleMen(index, id) {
				this.titleNums = index
				this.$tools.showToast('科目' + id)
				console.log(this.titleNums)
				console.log(index)
				this.titleid = id
			},
			signListMen() {
				this.$axios.axios('POST', signUpList, {}).then(res => {
					this.signUpData = res.data
				})
			},

			//科莫4
			subjects4() {
				uni.navigateTo({
					url: 'subjects4'
				})
			},
			//模拟考试
			simulation() {
				uni.navigateTo({
					url: 'simulation/simulation?id=' + this.titleid
				})
			},
			//跳转必看男带女归纳
			examinationMen(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/dataTime/dataTime'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: '../../dataTime/distance'
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/dataTime/speed'
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: '/pages/dataTime/trafficSign'
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: '/pages/dataTime/trafficGesture'
					})
				}
			},
			//科目4分类
			examinationMen2(id) {
				uni.navigateTo({
					url: '../../dataTime/subject4Classfiy/subject?id=' + id
				})
			},
			//我的成绩
			wrong() {
				uni.navigateTo({
					url: 'wrong?id=' + this.titleid
				})
			},
			//我的错题
			achievement() {
				uni.navigateTo({
					url: 'achievement?id=' + this.titleid
				})
			}
		}
	}
</script>

<style>
	.titleText {
		color: #0054A7 !important;
	}
	.bg0054A7{
		background-color: #0054A7 ;
	}
	
</style>
